<template>
  <div class="root_layout">
    <header>
      <MobileNavCon :init-id="selectId" :nav-list="menuList" />
      <!-- <WebNavConLeft :nav-list="menuList" :init-id="selectId" /> -->
      <WebNavCon :nav-list="menuList" :init-id="selectId" />
    </header>
    <!-- <ClientOnly>
      <BrowserCheck />
    </ClientOnly> -->
    <main>
      <div class="main_con">
        <slot />
      </div>
    </main>
    <footer>
      <Footer></Footer>
    </footer>

    <AnimationCircle />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const route = useRoute();
const cookie = useCookie("UserSource");
const { app, setMenus } = useApp();
// console.log(cookie.value);
import { menuList } from "@/components/mock/nav";
import WebNavConLeft from "~/components/WebNavConLeft.vue";
import WebNavCon from "~/components/WebNavCon.vue";
const selectId = ref("1-2");
// console.log(JSON.stringify(app.value.menus));
watch(
  () => route.path,
  (nv) => {
    selectId.value = "2-1";
  }
);
addIdsToTree(menuList, "children");
</script>
<style lang="scss" scoped>
.root_layout {
}
</style>
